

<div class="wrapper wrapper-content page-heading animated fadeInRight">

    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Search</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                            <div class=" animate fadeIn">
                                <form id="search_reqForm" class="form-horizontal">
                                    <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i>Search</i></h5>
                                    </div>
                                       <div class="ibox-content">
                                           <!-- <div class="form-group">
                                            <label class="col-lg-3 control-label">Transaction Type</label>
                                                <select  id="" class="chosen-select" name="">
                                                    <?php foreach ($engine as $eng) { ?>
                                                        <option value="<?php echo $eng->compute_engine; ?>" <?php echo($eng->compute_engine == "S" ? 'selected' : '' ); ?> ><?php echo $eng->meaning; ?></option>
                                                    <?php } ?>
                                                </select>  
                                          </div> -->
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label">Request Number:</label>
                                                <div class="col-lg-5 input-s">
                                                    <input type="text" placeholder="" name="search_num" id="s_req_num" class="form-control">
                                                </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label">Status:</label>
                                            <div class="col-lg-5">
                                                <select class = "chosen-select" name="search_stat" id ="s_stat">
                                                  <!-- <option value=""> -- </option> -->
                                                  <?php foreach ($status as $stat) { ?>
                                                    <option value="<?php echo $stat->lookup_code; ?>" id="" <?php echo ($stat->lookup_code == 'REQ_SUBMITTED' ? 'selected' : ''); ?> ><?php echo $stat->meaning; ?></option>
                                                  <?php } ?>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label"></label>
                                                <div class="col-lg-5">
                                                    <a href="javascript:document.getElementById('searchForm').reset();" class="btn btn-warning btn-md pull-right m-t-n-xs clear-btn" id="search-form"> Clear</a>
                                                    <button id="req_search_btn" class="btn btn-primary btn-md pull-right m-t-n-xs search-btn btn-margin-right" > Search</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                            </div>
                            <?php if($req == 'Y') {?>
                            <div class="row">
                                <div class="col-lg-2">
                                    <button id = "adds" class="btn btn-success btn-md m-t-n-xs add-tab-btn" type="button"> Add</button>
                                </div>
                            </div>
                            <?php } ?>
                            <!-- <div class="row" id="search-inv-trans" >
                                <div class="col-lg-12">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-content">
                                        <div class="table-responsive">
                                            <table class="table-bordered table-compact" style="width:100%;">
                                                <thead>
                                                    <tr>
                                                        <th data-sort-ignore="false" data-type="alpha" style="padding:8px;">Request #</th>
                                                        <th data-sort-ignore="false" data-type="alpha" style="padding:8px;">Request Date</th>
                                                        <th data-sort-ignore="false" data-type="alpha" style="padding:8px;">Requested By</th>
                                                        <th data-sort-ignore="false" data-type="alpha" style="padding:8px;">Status</th>
                                                        <th data-sort-ignore="false" data-type="alpha" style="padding:8px; width:50px;">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="resultfound" >
                                                    <tr style="line-height:1;padding:0px;">
                                                        <td style="text-align:left; padding:0px;">0001</td>
                                                        <td style="text-align:left; padding:0px;">09/02/2016</td>
                                                        <td style="text-align:left; padding:0px;">Mark</td>
                                                        <td style="text-align:left; padding:0px;">Submitted</td>
                                                        <td align="center" style="text-align:left; padding:2px;"><button  style="margin-left:5px;margin-top:2px;" class="btn btn-sm btn-outline btn-info btn-xs edit" title="Edit"><i class="fa fa-pencil-square-o fa-lg"></i></button><button style="margin-left: 2px;" class="btn btn-sm btn-outline btn-info btn-xs view" title="View"><i class="fa fa-file-text-o fa-lg"></i></button></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                            <div class="row" id="searchResult" >
                                    <div class="col-lg-12">
                                        <div class="ibox float-e-margins">
                                            <div class="ibox-content">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-compact" style="width:100%;">
                                                    <thead>
                                                        <tr>
                                                            <th style="text-align:center;">Request #</th>
                                                            <th style="text-align:center;">Request Date</th>
                                                            <th style="text-align:center;">Requested By</th>
                                                            <th style="text-align:center;width:85px;">Status</th>
                                                            <th style="text-align:center;width:125px;">Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="resultfound" >
                                                    <!-- <tr style="line-height:1;padding:0px;">
                                                        <td style="text-align:left; padding:0px;">0001</td>
                                                        <td style="text-align:center; padding:0px;">09/02/2016</td>
                                                        <td style="text-align:right; padding:0px;">Mark</td>
                                                        <td style="text-align:right; padding:0px;">Submitted</td>
                                                        <td align="center" style="text-align:left; padding:2px;"><button id="demo_btn" style="margin-left:5px;margin-top:2px;" class="btn btn-sm btn-outline btn-info btn-xs edit" title="Edit"><i class="fa fa-pencil-square-o fa-lg"></i></button><button id="demo_btn_view" style="margin-left: 2px;" class="btn btn-sm btn-outline btn-info btn-xs view" title="View"><i class="fa fa-file-text-o fa-lg"></i></button></td>
                                                    </tr> -->
                                                    </tbody>
                                                </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
<input type="hidden" id="count_add" value="0">
<input type="hidden" id="count_edit" value="0">
<input type="hidden" id="count_view" value="0">
<script>
    $(document).ready(function(){
        $(".chosen-select").chosen({width:"100%;"}); 

        var aprv = <?php echo json_encode($aprv); ?>;
        var rls  = <?php echo json_encode($rls);  ?>;
        var req  = <?php echo json_encode($req);  ?>;

        $('#adds').click(function(){
            $('#notify').text("");
                if($('#count_add').val() == 0){
                    $('#tab-list-2').append('<li id="add-link" class=""><a id="2nd" data-toggle="tab" href="#add">Add Request<button id="addX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                    $('.tab-content').append('<div id="add" class="tab-pane"><div class="panel-body"><div id="change2"></div></div></div>');
                    $("#change2").load("<?php echo $this->session->userdata('forload') . '/add_form'; ?>")
                    $('#count_add').val('1');
                    add_action('show'); search_action('close');
                }
            });

        $("#req_search_btn").click(function(e) {
            e.preventDefault();
            var trHTML='';
            console.log('hi');
            $('#resultfound').empty();
            $('#searchResult').show();
              $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/searchRequest'); ?>",
                cache: false,
                dataType: 'json',
                data: $('#search_reqForm').serialize(),
                success: function(e) {
                    console.log(e);
                    if(e == "No results found."){
                        console.log('error');
                        $('#resultfound').append("<td colspan='5' align='center'><h3>No Result Found</h3></td>");
                        notifymsg("danger","No Result Found");
                    }else{
                        console.log('success');
                        var countData=0;
                        $.each(e, function(i, item) {
                           if(e[i].inv_request_status == 'REQ_APPROVED' || e[i].inv_request_status == 'REQ_PRE-RELEASED'){ 
                                trHTML += '<tr style="line-height:1;padding:0px;"><input id="reqID" type="hidden" value="'+ e[i].inv_request_id +'"><td style="text-align:left; padding:0px;">'+ e[i].inv_request_num +'</td><td style="text-align:left; padding-left:0px;">'+ e[i].inv_request_date +'</td><td style="text-align:right; padding:0px;">'+ e[i].last_name +' ,'+e[i].first_name +'</td><td style="text-align:right; padding:0px;">'+ e[i].meaning +'</td><td align="center" style="text-align:center; padding:2px;"><button id="vw" style="margin-left:2px;margin-bottom:1px;" class="btn btn-sm btn-outline btn-info btn-xs view" title="View"><i class="fa fa-file-text-o fa-lg"></i></button></td></tr>';
                                countData++;
                            }else if(e[i].inv_request_status == 'REQ_RELEASED' || e[i].inv_request_status == 'REQ_REJECTED' ){
                                trHTML += '<tr style="line-height:1;padding:0px;"><input id="reqID" type="hidden" value="'+ e[i].inv_request_id +'"><td style="text-align:left; padding:0px;">'+ e[i].inv_request_num +'</td><td style="text-align:left; padding-left:0px;">'+ e[i].inv_request_date +'</td><td style="text-align:right; padding:0px;">'+ e[i].last_name +' ,'+e[i].first_name +'</td><td style="text-align:right; padding:0px;">'+ e[i].meaning +'</td><td align="center" style="text-align:center; padding:2px;"><button id="vw" style="margin-left:2px;margin-bottom:1px;" class="btn btn-sm btn-outline btn-info btn-xs view" title="View"><i class="fa fa-file-text-o fa-lg"></i></button></td></tr>';
                                countData++;
                            }else{
                                trHTML += '<tr style="line-height:1;padding:0px;"><input id="reqID" type="hidden" value="'+ e[i].inv_request_id +'"><td style="text-align:left; padding:0px;">'+ e[i].inv_request_num +'</td><td style="text-align:left; padding-left:0px;">'+ e[i].inv_request_date +'</td><td style="text-align:right; padding:0px;">'+ e[i].last_name +' ,'+e[i].first_name +'</td><td style="text-align:right; padding:0px;">'+ e[i].meaning +'</td><td align="center" style="text-align:center; padding:2px;"><button id="aprv" style="margin-left:5px;margin-bottom:1px;" class="btn btn-sm btn-outline btn-info btn-xs complete" title="Approve"><i class="fa fa-check-circle fa-lg"></i></button><button id="edt" style="margin-left:5px;margin-bottom:1px;" class="btn btn-sm btn-outline btn-info btn-xs edit" title="Edit"><i class="fa fa-pencil-square-o fa-lg"></i></button><button id="vw" style="margin-left:2px;margin-bottom:1px;" class="btn btn-sm btn-outline btn-info btn-xs view" title="View"><i class="fa fa-file-text-o fa-lg"></i></button></td></tr>';
                                countData++;
                            }
                        });
                        $('#resultfound').append(trHTML);
                        notifymsg("success","   . . . Search Success  , Found("+countData+") Item(s)");
                        sets();
                    }
                },
                error: function() {
                },
                complete: function() {
                    $("#req_search_btn").removeAttr('disabled');
                },
                beforeSend: function(){
                    $("#req_search_btn").attr('disabled',true);
                }
              });
            });

        $(document).on('click','.btn.btn-sm.btn-outline.btn-info.btn-xs.edit',function(){
          close_edit();
            var id         = $(this).closest('tr').children('#reqID').val();
            if($('#count_edit').val() == 0){
                $('#tab-list-2').append('<li id="edit-link" class="links"><a data-toggle="tab" href="#edit">Edit<button id="editX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div id="edit" class="tab-pane"><div class="panel-body"><div id="change3"></div></div></div>');
                $("#count_edit").val('1');
               }
            $("#change3").load("<?php echo $this->session->userdata('forload') . '/edit_form/'; ?>"+id+"/edit")
            edit_action('show'); search_action('close');
            notifymsg("hide","hide");
        });

        $(document).on('click','.btn.btn-sm.btn-outline.btn-info.btn-xs.complete',function(){
          close_edit();
            var id         = $(this).closest('tr').children('#reqID').val();
            if($('#count_edit').val() == 0){
                $('#tab-list-2').append('<li id="edit-link" class="links"><a data-toggle="tab" href="#edit">Edit<button id="editX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div id="edit" class="tab-pane"><div class="panel-body"><div id="change3"></div></div></div>');
                $("#count_edit").val('1');
               }
            $("#change3").load("<?php echo $this->session->userdata('forload') . '/edit_form/'; ?>"+id+"/apprv")
            edit_action('show'); search_action('close');
            notifymsg("hide","hide");
        });

        $(document).on('click','.btn.btn-sm.btn-outline.btn-info.btn-xs.view',function(){
            var id         = $(this).closest('tr').children('#reqID').val();
            if($('#count_view').val() == 0){
                $('#tab-list-2').append('<li id="view-link" class="links"><a data-toggle="tab" href="#view">View<button id="viewX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div id="view" class="tab-pane"><div class="panel-body"><div id="change4"></div></div></div>');
                $("#count_view").val('1');
                }
            $("#change4").load("<?php echo $this->session->userdata('forload') . '/view_form/'; ?>"+id)
            view_action('show'); search_action('close');
            notifymsg("hide","hide");
        });


        // $('#demo_btn').click(function(){
        //   close_edit();
        //     var id         = 0;
        //     if($('#count_edit').val() == 0){
        //         $('#tab-list-2').append('<li id="edit-link" class="links"><a data-toggle="tab" href="#edit">Edit<button id="editX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
        //         $('.tab-content').append('<div id="edit" class="tab-pane"><div class="panel-body"><div id="change3"></div></div></div>');
        //         $("#count_edit").val('1');
        //        }
        //     $("#change3").load("<?php echo $this->session->userdata('forload') . '/edit_form/'; ?>"+id)
        //     edit_action('show'); search_action('close');
        //     notifymsg("hide","hide");
        // });

        // $('#demo_btn_view').click(function(){
        //     var id         = 0;
        //     if($('#count_view').val() == 0){
        //         $('#tab-list-2').append('<li id="view-link" class="links"><a data-toggle="tab" href="#view">View<button id="viewX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
        //         $('.tab-content').append('<div id="view" class="tab-pane"><div class="panel-body"><div id="change4"></div></div></div>');
        //         $("#count_view").val('1');
        //         }
        //     $("#change4").load("<?php echo $this->session->userdata('forload') . '/view_form/'; ?>"+id)
        //     view_action('show'); search_action('close');
        //     notifymsg("hide","hide");
        // });

        function sets(){
            $('#edt').hide(); $('#aprv').hide(); $('#vw').show(); $('#rlse').hide();
            if(aprv == 'Y'){$('#aprv').show();}
            if(req  == 'Y'){$('#edt').show();}
            if(rls  == 'Y'){$('#rlse').show();}
        }
    });
</script>